<template>
	<view class="neo-grid">
		<view class="item_wrap" v-for="(item,index) in list" :style="{'min-width':item_width}" @tap="tap(index)">
			<view :style="{'margin-left':'10rpx','background':colorResource==''?getRadomColor():item[colorResource]}"
				class="item_css">
				<view class="text_co_wrap">{{keyResource==""?item:item[keyResource]}}
					<image v-if="src!=''" class="image" :src="src"></image>
				</view>

			</view>


		</view>

	</view>
</template>

<script>
	export default {
		name: "neo-labels",
		data() {
			return {
				item_width: 0,


			};
		},
		props: {

			src: {
				type: String,
				default: ""
			},

			list: {
				type: Array,
				default: function() {
					return []
				}
			},
			keyResource: {
				type: String,
				default: ""
			},
			colorResource: {
				type: String,
				default: ""
			}
		},
		mounted() {

		},
		methods: {
			tap(index) {
				this.$emit('hatap', index)
			},
			getRadomColor() {
				return `#${Math.floor(Math.random()* 0xffffff).toString(16)}`


			},
		}
	}
</script>

<style lang="scss">
	.neo-grid {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* #ifndef MP */
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* #endif */
		// display: flex;
		/* #ifdef MP */
		position: relative;
		box-sizing: border-box;
		overflow: hidden;

		/* #endif */
		.item_wrap {
			display: flex;
			// flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			border-radius: 50rpx;
			position: relative;
			box-sizing: border-box;
			margin-right: 20rpx;

			.line {
				margin-top: 5rpx;
				background: #007AFF;
				width: 100%;
				height: 6rpx;
			}

			.text_co_wrap {
				display: flex;
				align-items: center;
				padding: 0rpx 10rpx;
				height: 45rpx;
				color: #fff;
				font-size: 29rpx;
				background: #FFE9E9;
				border-radius: 21rpx;
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #FF8C9A;
				line-height: 34rpx;
				border-radius: 50rpx;


				.image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}

			}

			.line {
				margin-top: 5rpx;
				background: #007AFF;
				width: 100%;
				height: 6rpx;
			}


		}
	}

	.item_css {
		min-width: 80rpx;
		padding: 0 12rpx;
		background: #FFE9E9;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>